<style include="diagnostics-shared diagnostics-fonts">
  #cardTitle {
    align-items: center;
    display: flex;
  }

  #icon {
    padding-inline-end: 12px;
  }

  #troubleShootingContainer {
    padding-inline: 20px;
  }
</style>
<diagnostics-card is-networking-card
    hide-data-points="[[!showNetworkDataPoints_]]">
  <template is="dom-if" if="[[showTroubleshootingCard_]]">
    <div slot="left-panel" id="troubleShootingContainer">
      <network-troubleshooting id="networkTroubleshooting"
          slot="left-panel"
          troubleshooting-info="[[troubleshootingInfo_]]">
      </network-troubleshooting>
    </div>
  </template>
  <div id="cardTitle" slot="title" tabindex="0">
    <diagnostics-network-icon id="icon" network="[[network]]">
    </diagnostics-network-icon>
    <span id="titleText">
      [[getNetworkCardTitle_(networkType_, networkState_)]]
    </span>
  </div>
  <template is="dom-if" if="[[macAddress_]]">
    <div id="macAddressChip" slot="chip" class="diagnostics-chip"
        tabindex="0">
      [[getMacAddress_(macAddress_)]]
    </div>
  </template>
  <template is="dom-if" if="[[showNetworkDataPoints_]]">
    <network-info slot="body" guid="[[guid]]" network="[[network]]">
    </network-info>
    <ip-config-info-drawer id="ipConfigInfoDrawer" network="[[network]]"
        slot="routines">
    </ip-config-info-drawer>
  </template>
</diagnostics-card>
